const path = require('path')
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const lessToJs = require('less-vars-to-js');
const fs = require('fs');
const themeLess = fs.readFileSync('./app/public.less', 'utf8');
const theme = lessToJs(themeLess, { resolveVariables: true, stripPrefix: true })

module.exports = {
    entry: {
        main: __dirname + "/app/index.js" //的唯一入口文件
    },

    module: {
        rules: [
            // { test: /\.tsx?$/, loaders: ['ts-loader'] },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                    {
                        loader: '@svgr/webpack',
                        options: {
                            babel: false,
                            icon: true,
                        },
                    },
                ],
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: "json-loader"
            },
            {
                test: /(\.jsx|\.js)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(less|css)$/,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            minimize: true,
                            // importLoaders: 2,
                            localIdentName: "[local]_[hash:base64:8]"
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    { loader: 'less-loader', options: { javascriptEnabled: true } }
                ]
            },
            {
                test: /\.(less|css)$/,
                exclude: /app/,
                use: [
                    // MiniCssExtractPlugin.loader,
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            // importLoaders: 2,
                            minimize: true
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            javascriptEnabled: true,
                            modifyVars: theme,
                        }
                    }
                ]
            },
            // {
            //     test: /\.css$/,
            //     use: [
            //         MiniCssExtractPlugin.loader,
            //         'css-loader',
            //         'postcss-loader'
            //     ]
            // },
            // {
            //     test: /\.less$/,
            //     use: [
            //         MiniCssExtractPlugin.loader,
            //         'css-loader',
            //         {
            //             loader: 'less-loader',
            //             options: {
            //                 sourceMap: true,
            //                 javascriptEnabled: true,
            //             }
            //         }
            //     ]
            // },
            // {
            //     test: /\.html$/,
            //     use: [
            //         {
            //             loader: "html-loader",
            //             options: { minimize: true }
            //         }
            //     ]
            // },
            {
                test: /\.(png|jpg|gif|woff|woff2|ttf|eot|swf|mp4)$/,
                use: {
                    loader: 'file-loader',
                    query: {
                        name: './assets/[name]_[sha512:hash:base64:7].[ext]'
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
        modules: [
            'node_modules', path.join(__dirname, '../node_modules')
        ],
        alias: {
            Util: path.resolve(__dirname, 'app/utils/'),
            Componets: path.resolve(__dirname, 'app/Componets/'),
            Common: path.resolve(__dirname, 'app/routes/Common/')
        }
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.NamedChunksPlugin(),
        // new webpack.HotModuleReplacementPlugin(),

        //设置全局变量
        // new webpack.DefinePlugin({
        //     'process.env.NODE_ENV': JSON.stringify('production')
        // }),
        //全局挂载
        new webpack.ProvidePlugin({
            ReactDOM: "react-dom",
            React: 'react',
            $: "jquery",
            _: 'lodash'
        }),

        // new MiniCssExtractPlugin({
        //     filename: "[name].[contenthash].css",
        //     chunkFilename: "[id].[contenthash].css"
        // }),
    ]
};